<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('气值列表')"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{//dist/css/media.css}">
    <style>
        #zong {
            color: blue;
            font-weight: bold!important;
            font-size: 18px!important;
        }
    </style>
</head>
<body class="gray-bg">

<div class="chicken-contentPart">
    <div class="chicken-main">
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime"
                                           placeholder="开始时间"
                                           name="params[beginTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                           placeholder="结束时间"
                                           name="params[endTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container-div">


    <div id="main" class="container-fluid" style="height:400px;"></div>

    <div class="row">


        <div class="col-sm-12 select-table table-striped">
            <h3><span th:text="锅炉气值"></span>
                <span>用量合计:
                <i id="zong">

                </i>
                m³</span>
            </h3>
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>

    <div class="bottom-btns"></div>
</div>
<div th:include="include :: footer"></div>
<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>
<script th:inline="javascript">
    /* window.parent.$(".butt").remove()
     window.parent.$(".footer").append('<div class="butt">' +
         '  <button type="button" class="btn btn-primary ">工作记录</button>' +
         '<button class="btn btn-primary workrecord"  type="button" >值班记录</button></div>')*/


    var editFlag = [[${@permission.hasPermi('system:ncGasLog:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:ncGasLog:remove')}]];
    var prefix = ctx + "system/ncGasLog";

    /* 值班记录跳转 */
    /*window.parent.$(".workrecord").click(function () {
        var url = ctx + 'system/ncGasDuty';
        $.modal.openTab("值班记录", url);

    })*/


    $(function () {
        var options = {
            responseHandler: function (res) {
                console.log(res)
                $('#zong').text((res.params.gasTop - res.params.gasLow).toFixed(2));
            },
           /* responseHandler:function(data){
                console.log(data)
                $('#zong').text((data.params.gasTop - data.params.gasLow).toFixed(2));
             },*/
            uniqueId: "gasLogId",
            url: prefix + "/list",
            // createUrl: prefix + "/add",
            // updateUrl: prefix + "/edit/{id}",
            // removeUrl: prefix + "/remove",
            // exportUrl: prefix + "/export",
            modalName: "气值",
            showExport: false,
            showSearch: false,
            showRefresh: false,
            showColumns: false,
            showToggle: false,
            sortName:'createTime',
            sortOrder:'desc',
           /* onLoadSuccess: function (data) {
                console.log(data.params);
              /!* $("#zong").text(data.params)*!/
            },*/
            columns: [
                /*{
                checkbox: false
            },*/
                {
                    title: "序号",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field: 'gasLogId',
                    title: '企标记录id',
                    visible: false
                },
                {
                    field: 'gasValue',
                    title: '气表值',
                    // sortable: true
                },
                {
                    field: 'createTime',
                    title: '记录时间',
                    sortable: true
                },
                {
                    field: 'createBy',
                    title: '记录人员',
                    // sortable: true
                },
                {
                    field: 'remark',
                    title: '备注',
                }]
        };
        $.table.init(options);


    });
    // 图表
    // 基于准备好的dom，初始化echarts实例
    // debugger;
    var ctx = [[@{
        /}]];
        var myChart = echarts.init(document.getElementById('main'));

        var zfeed = [[${zfeed}]]
        var xData = [[${dataTime}]];
        var _title = '鸡肉产量图'
        // 指定图表的配置项和数据
        var option01 = {

            /* title: {
                text: '折线图',
                subtext: '模拟数据',
                x: 'center'
            },*/

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'left 50px',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                data: ['主饲料', '辅饲料']
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '16%',   // 等价于 y: '16%'
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: '#52adff'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 30, // 旋转角度
                    interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: xData
            },

            yAxis: {
                name: '数值',
                type: 'value',
                min: 0, // 设置y轴刻度的最小值
                // max: 1800,  // 设置y轴刻度的最大值
                splitNumber: 9,  // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: '#52adff'
                    }
                },
            },

            series: [
                /*{
                    name: '主饲料',
                    data: zfeed,
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                },*/

                {
                    name: '气值',
                    data: zfeed,
                    type: 'line',
                    // 设置折线上圆点大小
                    symbolSize: 8,
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red',  // 拐点边框颜色
                            lineStyle: {
                                width: 5,  // 设置线宽
                                type: 'solid'  //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },

            ]


        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option01);


        function reloadIt() {
            var link = ctx + "system/ncGasLog/gasLog";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-" + new Date().getDate());
            reloadIt();
        });
        setTitle("气表用量", false)
</script>

</body>
</html>